<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'
const charts = ref()
onMounted(()=>{
  const myCharts = echarts.init(charts.value)
  myCharts.setOption({
    // title:{
    //   text:'男女比例',
    //   textStyle:{
    //     color:'skyblue'
    //   },
    //   left:'40%'
    // },
    xAxis:{
      show:false,
      min: 0,
      max: 100
    },
    yAxis:{
      type:'category',
      show:false
    },
    series:[
      {
        type:'bar',
        data:[58],
        barWidth:20,
        z:100,
        itemStyle:{
          color:'skyblue',
          borderRadius:20
        }
      },
      {
        type:'bar',
        data:[100],
        barWidth:20,
        barGap:'-100%',
        itemStyle:{
          color:'pink',
          borderRadius:20
        }
      }
    ],
    grid:{
      left:0,
      top:0,
      right:0,
      bottom:0
    },
  })
})
</script>

<template>
  <div class="sex-container">
    <div class="sex-tit">
      <p class="tit">男女比例</p>
      <p class="bg"></p>
    </div>
    <div class="sex-main">
      <div class="man">
        <img src="../../images/man.png" alt="">
      </div>
      <div class="women">
        <img src="../../images/woman.png" alt="">
      </div>
    </div>
    <div class="rate">
      <p>男士58%</p>
      <p>女士42%</p>
    </div>
    <div class="charts" ref="charts">
    </div>
  </div>
</template>

<style scoped lang="scss">
.sex-container{
  background: url("../../images/dataScreen-main-cb.png") no-repeat;
  background-size: cover;
  margin: 20px 0;
  .sex-tit{
    margin-left: 20px;
    .tit{
      color: white;
      font-size: 20px;
      margin:10px 0;
    }
    .bg{
      width: 68px;
      height: 7px;
      background: url("../../images/dataScreen-title.png");
    }
  }
  .sex-main{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    .man{
      margin-right: 20px;
      background: url("../../images/man-bg.png") no-repeat;
      width: 111px;
      height: 115px;
      text-align: center;
      img{
        margin-top: 28px;
      }
    }
    .women{
      background: url("../../images/woman-bg.png") no-repeat;
      width: 111px;
      height: 115px;
      text-align: center;
      img{
        margin-top: 28px;
      }
    }
  }
  .rate{
    display: flex;
    justify-content: space-between;
    color: white;
  }
  .charts{
    height: 100px;
    width: 100%;
  }
}
</style>